<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>威胁分析管理</title>
    <link rel="stylesheet" type="text/css" href="/static/layui/css/layui.css" />
{#    <link rel="stylesheet" type="text/css" href="/static/css/admin.css" />#}
    <style>
        body { font-family: Arial, sans-serif; }
        .container { width: 98%; margin: 0 auto; }
        .form-group { margin-bottom: 15px; }
        .form-group label { display: block; margin-bottom: 5px; }
        .form-group input, .form-group select { width: 100%; padding: 8px; box-sizing: border-box; }
        .btn { padding: 10px 15px; background-color: #007BFF; color: white; border: none; cursor: pointer; align-items: center; justify-content: center; }
        .btn:hover { background-color: #0056b3; }
        table { width: 100%; border-collapse: collapse; margin-top: 20px; }
        table, th, td { border: 1px solid #ddd; }
        th, td { padding: 10px; text-align: left; }
        th { background-color: #f2f2f2; }
        .header-container { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; }
        /* 添加CSS样式来调整下拉框 */
        .layui-table-cell { height: auto !important; overflow: visible !important; }
        .layui-table-view .layui-table { overflow: visible; }
        .layui-table-view .layui-table[lay-filter="threatAnalysisTable"] .layui-table-cell { overflow: visible; }
        .layui-form-select dl { max-height: 200px !important; position: absolute; z-index: 1000; width: 100%; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 2px; box-shadow: 0 2px 4px rgba(0, 0, 0, .12); }
        /* 新增样式，确保下拉框和按钮在同一行 */
        .layui-form .layui-input-inline {
            display: flex;
            align-items: center;
        }
        .layui-form .layui-input-inline .layui-btn {
            margin-left: 10px;
        }
         /* 统一设置所有 layui-input 的样式 */
        .layui-input {
            width: 120px; /* 设置宽度为 100px */
            margin-right: 12px;
            align-content: center;
            display: block; /* 使 margin: 0 auto 生效 */
        }
        /* 自动折行样式 */
        .auto-wrap {
            white-space: pre-wrap; /* 保留空白符序列，但是正常地进行换行 */
            word-wrap: break-word; /* 在长单词或 URL 地址内部进行换行 */
            max-width: 100%; /* 确保内容不会溢出单元格 */
        }
    </style>
</head>
<body>
    <div class="container">

        <div class="layui-form" id="table-list">
            <table class="layui-hide" id="threatAnalysisTable" lay-filter="threatAnalysisTable"></table>
        </div>
    </div>

    <script src="/static/js/jquery-3.7.1.min.js"></script>
    <script src="/static/js/layui.js" type="text/javascript" charset="utf-8"></script>
    <script src="/static/js/common.js" type="text/javascript" charset="utf-8"></script>
    <script type="text/html" id="toolbarTop">
        <form class="layui-form" id="filterForm">
            <div class="layui-input-inline">
                <input type="text" name="filter_ecu"     placeholder="- 零部件 -" lay-affix="clear" class="layui-input" >
                <input type="text" name="filter_feature" placeholder="- 资产 -" lay-affix="clear" class="layui-input" >
                <input type="text" name="filter_security" placeholder="- 安全属性 -" lay-affix="clear" class="layui-input" >
                <input type="text" name="filter_attack_level" placeholder="- 攻击等级 -" lay-affix="clear" class="layui-input" >

                <button class="layui-btn layui-btn-sm" lay-submit lay-filter="filterSubmit">
                    <i class="layui-icon layui-icon-search"></i>搜索</button>
                <button class="layui-btn layui-btn-primary layui-btn-sm" id="clearFilter">取消</button>

            </div>
        </form>
    </script>

    <script>
        layui.use(['table', 'form', 'layer'], function () {
            var table = layui.table;
            var form = layui.form;
            var layer = layui.layer;

            // 获取下拉框选项
            var vdtOptions = [];
            var aslOptions = [];
            var knowledgeLevelOptions = [];
            var wooOptions = [];
            var deviceOptions = [];

            Promise.all([
                fetch('/getThreadAssessmentPara?type=发现漏洞所需要的时间').then(response => response.json()),
                fetch('/getThreadAssessmentPara?type=攻击者专业水平').then(response => response.json()),
                fetch('/getThreadAssessmentPara?type=对目标的知识度水平').then(response => response.json()),
                fetch('/getThreadAssessmentPara?type=威胁被利用的机会窗口水平').then(response => response.json()),
                fetch('/getThreadAssessmentPara?type=攻击所需设备水平').then(response => response.json())
            ]).then(data => {
                vdtOptions = data[0];
                aslOptions = data[1];
                knowledgeLevelOptions = data[2];
                wooOptions = data[3];
                deviceOptions = data[4];
                renderTable();
            });

            // 监听 filterSubmit 按钮的提交事件
            form.on('submit(filterSubmit)', function (data) {
                console.log('搜索条件:', data.field); // 打印表单数据

                // 获取用户选择的过滤条件
                var filterData = data.field;
                // 保存输入框的值

                var filterEcuValue = $('input[name="filter_ecu"]').val();
                var filterFeatureValue = $('input[name="filter_feature"]').val();
                var filterSecurityValue = $('input[name="filter_security"]').val();
                var filterAttackLevelValue = $('input[name="filter_attack_level"]').val();

                // 重新加载表格数据，并传递过滤条件
                table.reloadData('threatAnalysisTable', {
                    where: filterData,
                    page: {
                        curr: 1 // 重新从第一页开始
                    },
                    done: function (res, curr, count) {
                        // 表格重新加载完成后，重新为输入框赋值
                        $('input[name="filter_ecu"]').val(filterEcuValue);
                        $('input[name="filter_feature"]').val(filterFeatureValue);
                        $('input[name="filter_security"]').val(filterSecurityValue);
                        $('input[name="filter_attack_level"]').val(filterAttackLevelValue);
                    }
                });

                return false; // 阻止表单默认提交行为
            });

            function renderTable() {
                // 计算表格的高度
                var windowHeight = window.innerHeight;
                var tableHeight = windowHeight - 30; // 减去其他元素的高度和一些边距

                {#console.info('headerHeight:',headerHeight);#}
                table.render({
                    elem: '#threatAnalysisTable',
                    url: '/getThreatAnalysis',
                    height: tableHeight,
                    toolbar: '#toolbarTop',
                    page: true,
                    even: true,
                    limit: 50,
                    limits: [20, 50, 100, 500, 1000],
                    cols: [[
                        {field: 'id', title: 'ID', width: 60,  align: 'center', hide: true},
                        {type: 'numbers', title: '序号', width: 60, align: 'center'}, // 添加'序号'列
                        {field: 'ecu', title: 'ECU', width: 80, align: 'center'},
                        {field: 'ecu_feature', title: 'ECU资产', width: 100, align: 'center'},
                        {field: 'security_attr', title: '安全属性', width: 110, align: 'center'},
                        {field: 'thread_type', title: '威胁类型', width: 110, align: 'center'},
                        {#{field: 'attack_path_number', title: '攻击路径编号', width: 180, align: 'center'},#}
                        {field: 'attack_path', title: '攻击路径', width: 300, align: 'left', edit: 'textarea', templet: function(d) {
                            return '<div class="auto-wrap">' + d.attack_path + '</div>';
                        }, editOptions: {
                            type: 'textarea',
                            style: 'width: 100%; height: 100px;' // 设置textarea的样式
                        }},
                        {field: 'thread_scenario_number', title: '威胁场景编号', width: 210, align: 'center'},
                        {field: 'thread_scenario', title: '威胁场景', width: 300, align: 'left', edit: 'textarea', templet: function(d) {
                            return '<div class="auto-wrap">' + d.thread_scenario + '</div>';
                         }, editOptions: {
                            type: 'textarea',
                            style: 'width: 100%; height: 100px;' // 设置textarea的样式
                        }},
                        {field: 'vdt_id', title: '发现漏洞所需时间', width: 180, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="vdtIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < vdtOptions.length; i++) {
                                html += '<option value="' + vdtOptions[i].id + '" ' + (vdtOptions[i].id == d.vdt_id ? 'selected' : '') + '>' + vdtOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'asl_id', title: '攻击者专业水平', width: 180, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="aslIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < aslOptions.length; i++) {
                                html += '<option value="' + aslOptions[i].id + '" ' + (aslOptions[i].id == d.asl_id ? 'selected' : '') + '>' + aslOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'knowledge_level_id', title: '知识水平', width: 180, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="knowledgeLevelIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < knowledgeLevelOptions.length; i++) {
                                html += '<option value="' + knowledgeLevelOptions[i].id + '" ' + (knowledgeLevelOptions[i].id == d.knowledge_level_id ? 'selected' : '') + '>' + knowledgeLevelOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'woo_id', title: '机会窗口', width: 180, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="wooIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < wooOptions.length; i++) {
                                html += '<option value="' + wooOptions[i].id + '" ' + (wooOptions[i].id == d.woo_id ? 'selected' : '') + '>' + wooOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'device_id', title: '所需设备', width: 180, align: 'center', templet: function(d) {
                            var html = '<select lay-filter="deviceIdSelect" lay-search lay-verify="required">';
                            for (var i = 0; i < deviceOptions.length; i++) {
                                html += '<option value="' + deviceOptions[i].id + '" ' + (deviceOptions[i].id == d.device_id ? 'selected' : '') + '>' + deviceOptions[i].name + '</option>';
                            }
                            html += '</select>';
                            return html;
                        }},
                        {field: 'attack_value', title: '攻击可行性值', width: 130, align: 'center'},
                        {field: 'attack_level', title: '攻击等级', width: 130, align: 'center', sort: true}
                    ]],
                    done: function (res, curr, count) {
                        console.log('表格渲染完成');
                        // 手动渲染下拉框
                        form.render('select');
                    }
                });
            }

            // 表格编辑事件
            table.on('edit(threatAnalysisTable)', function (obj) {
                var value = obj.value // 得到修改后的值
                    , data = obj.data // 得到所在行所有键值
                    , field = obj.field; // 得到字段

                // 发送更新请求
                fetch('/updateThreatAnalysis', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: data.id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                    {#table.reload('threatAnalysisTable');#}
                });
            });

            // 下拉框选择事件
            form.on('select(vdtIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['threatAnalysisTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'vdt_id';

                // 发送更新请求
                fetch('/updateThreatAnalysis', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 攻击者专业水平下拉框选择事件
            form.on('select(aslIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['threatAnalysisTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'asl_id';

                // 发送更新请求
                fetch('/updateThreatAnalysis', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 知识水平下拉框选择事件
            form.on('select(knowledgeLevelIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['threatAnalysisTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'knowledge_level_id';

                // 发送更新请求
                fetch('/updateThreatAnalysis', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 机会窗口下拉框选择事件
            form.on('select(wooIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['threatAnalysisTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'woo_id';

                // 发送更新请求
                fetch('/updateThreatAnalysis', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });

            // 所需设备下拉框选择事件
            form.on('select(deviceIdSelect)', function (data) {
                var value = data.value;
                var tr = data.othis.parents('tr');
                var rowData = table.cache['threatAnalysisTable'][tr.data('index')]; // 获取当前行的数据
                var key_id = rowData.id; // 获取当前行的 ID 列的值
                var field = 'device_id';

                // 发送更新请求
                fetch('/updateThreatAnalysis', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json'
                    },
                    body: JSON.stringify({
                        id: key_id,
                        field: field,
                        value: value
                    })
                })
                .then(response => response.json())
                .then(data => {
                    layer.msg(data.msg);
                });
            });
        });
    </script>
</body>
</html>